<template>
	<view class="content">
		<!-- 胶片 -->
		<view class="film" style="background: url('../../static/index/film.png'); background-size: 100% 100%;">
			<view class="img">
				<image :src="musicArry[musicIndex].img" mode=""></image>
			</view>
		</view>
		
		
		<!-- 音乐控件 -->
		<view class="control">
			<image class="img-1" src="../../static/index/like.png" mode=""></image>
			<image class="img-2" src="../../static/index/song.png" mode=""></image>
			<image v-if="musicSate" @click="musicStop" class="img-3" src="../../static/index/play-1.png" mode=""></image>
			<image v-else  @click="musicPlay" class="img-3" src="../../static/index/stop-1.png" mode=""></image>
			<image class="img-4" src="../../static/index/next.png" mode=""></image>
			<image class="img-5" src="../../static/index/random.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				musicArry: [],
				musicIndex: 0,
				musicSate: true
			}
		},
		onLoad(options) {
			this.musicArry = JSON.parse(decodeURIComponent(options.query)).array;
			this.musicIndex = JSON.parse(decodeURIComponent(options.query)).index;
		},
		methods: {
			// 音乐播放
			musicPlay() {
				getApp().musicPlay();
				this.musicSate = true;
				console.log('点击播放')
			},
			// 音乐暂停
			musicStop() {
				console.log('音乐暂停')
				getApp().musicStop();
				this.musicSate = false;
			},
		}
	}
</script>

<style lang="less" scoped>
.content {
	position: relative;
	width: 100%;
	height: 100vh;
	background: rgba(242, 242, 255, 1);
	padding-top: 70rpx;
	box-sizing: border-box;
	.film {
		width: 510rpx;
		height: 510rpx;
		margin: 0 auto;
		padding: 90rpx;
		box-sizing: border-box;
		.img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			overflow: hidden;
			border: 20rpx solid #000;
			box-sizing: border-box;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.control {
		position: absolute;
		width: 100%;
		bottom: 100rpx;
		padding: 0 65rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.img-1 {
			width: 72rpx;
			height: 72rpx;
		}
		.img-2 {
			width: 72rpx;
			height: 72rpx;
		}
		.img-3 {
			width: 132rpx;
			height: 132rpx;
		}
		.img-4 {
			width: 72rpx;
			height: 72rpx;
		}
		.img-5 {
			width: 72rpx;
			height: 72rpx;
		}
	}
}
</style>
